<template>
	<div id="serach">
		<div class="watch">
			<i class="fa fa-search" @click="serach1"></i>
			<input type="text" v-model="keyword" @keyup.enter="serach1" />
		</div>
		<div class="txt">
			电影/电视剧/综艺
		</div>
		<div class="show">
			<ul>
				<li v-for="item in serach" :key="item.id">
					<div>
						<img :src="require('../assets/images/'+item.img+'.png')">
					</div>
					<div>
						<p>{{item.name}}</p>
						<p class="actors">主演： {{item.perfor}}</p>
						<p>{{item.count}}</p>
					</div>
					<div>
						<p>{{item.mark}}</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "SerachTab",
		data() {
			return {
				keyword: '',
				all: [],
				serach: [{
					"id": 1,
					"img": "001",
					"name": "机械师2：复活",
					"mark": 8.9,
					"perfor": "杰森·斯坦森 杰西卡·阿尔芭 汤米·李·琼斯 杨紫琼 山姆·哈兹尔丁",
					"count": "今天50家影院放映800场"
				}]
			}
		},
		mounted() {
			axios.get("/mock/api.json").then(
				response => {
					this.all = [...response.data.movielist, ...response.data.movielist2]
					console.log(this.all)
				}
			)
		},
		methods: {
			serach1() {
				this.serach = this.all.filter((p) => {
					if (this.keyword == '') {
						return false
					} else {
						return p.name.indexOf(this.keyword) != -1
					}
				})
				console.log(this.serach)
			}
		}
	}
</script>

<style scoped>
	.watch {
		width: 100%;
		height: 50px;
		background-color: #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	i {
		position: absolute;
		left: 20px;
	}

	input {
		width: 90%;
		margin-left: 2%;
		margin-right: 2%;
		height: 25px;
		border-radius: 5px;
		border: #CCCCCC 1px solid;
		padding-left: 30px;

	}

	.txt {
		height: 40px;
		border-bottom: solid 1px #EEEEEE;
		line-height: 40px;
		font-weight: bold;
		color: #999999;
		padding-left: 20px;
	}

	.show ul {
		margin-bottom: 50px;
	}

	.show ul li {
		height: 130px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: dashed #CCCCCC 1px;
		font-size: 15px;
	}

	.show div {
		height: 110px;
		color: #999999;
	}

	img {
		width: 80px;
	}

	li div:nth-child(1) {
		width: 25%;
		padding-left: 10px;
	}

	li div:nth-child(2) {
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	li div:nth-child(3) {
		width: 22%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #E54847;
		font-size: 16px;
	}

	.actors {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	li div:nth-child(2)>p:nth-child(1) {
		font-weight: bold;
		font-size: 17px;
		color: black;
	}

	li div:nth-child(2)>p:nth-child(2)>span:nth-child(2) {
		color: #FF9900;
		padding-left: 5px;
	}
</style>
